<template>
  <div class="markerSetPanelBox">
    <div class="pointerIcon">
      <input type="checkbox" v-model="selectMarkers" id="pointer" name="selectMarkers" value="all">
      <label for="pointer">
        <img src="../assets/images/mapIconTest/pointer.png" alt="marker.name">
      </label>
    </div>
    <div class="markersBox" :style="{width: 60 * markerSetData.maximum + 'px'}">
      <div class="wrapMarkers">
        <ul class="markerSetUl" ref="markerSetUl" :style="{width: 60 * markerSetData.markers.length + 'px'}">
          <li class="markerSetLi" v-for="(marker) in markerSetData.markers" :key="marker.key">
            <input type="checkbox" v-model="selectMarkers" :id="marker.id" name="selectMarkers" :value="marker.id">
            <label :for="marker.id">
              <img :src="marker.icon" alt="marker.name">
            </label>
            <ul v-if="selectMarkers.indexOf(marker.id) > -1" @change="showStyle(marker.showList)" class="markerMsgUl" :key="marker.key">
              <li v-for="msg in marker.msg" :key="msg.id">
                <label :for="msg.id" class="wrapBox">
                  <p class="wrapLabel">
                    {{msg.label}}
                  </p>
                  <input type="radio" name="showBili" v-model="marker.showList" :id="msg.id" :value="msg.id">
                  <label :for="msg.id" class="checkLabelStyle"></label>
                </label>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="iconGo" @click="iconGo">
        <span class="leftIconGo" go-type="left"></span>
        <span class="rightIconGo" go-type="right"></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: 'chend',
      showList: '',
      selectMarkers: ['all'],
      markerSetUl: '',
      goTime: '',
      goPix: 29
    }
  },
  props: {
    markerSetData: {
      type: Object,
      default () {
        return {
          markers: [{
            icon: require('../assets/images/mapIconTest/car.png'),
            name: '警车',
            id: 'icon_car',
            msg: [{
              label: '800:1',
              value: '800',
              id: 'msg1'
            }, {
              label: '600:1',
              value: '600',
              id: 'msg2'
            }]
          }, {
            icon: require('../assets/images/mapIconTest/camer.png'),
            name: '摄像头',
            id: 'icon_video',
            msg: [{
              label: '800:11',
              value: '800',
              id: 'msg11'
            }, {
              label: '600:1',
              value: '600',
              id: 'msg22'
            }]
          }, {
            icon: require('../assets/images/mapIconTest/zhiand.png'),
            name: '摄像头',
            id: 'icon_point',
            msg: [{
              label: '800:1',
              value: '800',
              id: 'msg11'
            }, {
              label: '600:1',
              value: '600',
              id: 'msg22'
            }]
          }, {
            icon: require('../assets/images/mapIconTest/camer.png'),
            name: '摄像头',
            id: 'cameraId2',
            msg: [{
              label: '800:1',
              value: '800',
              id: 'msg11'
            }, {
              label: '600:1',
              value: '600',
              id: 'msg22'
            }]
          }, {
            icon: require('../assets/images/mapIconTest/camer.png'),
            name: '摄像头',
            id: 'cameraId3',
            msg: [{
              label: '800:1',
              value: '800',
              id: 'msg11'
            }, {
              label: '600:1',
              value: '600',
              id: 'msg22'
            }]
          }, {
            icon: require('../assets/images/mapIconTest/camer.png'),
            name: '摄像头',
            id: 'cameraId4',
            msg: [{
              label: '800:1',
              value: '800',
              id: 'msg11'
            }, {
              label: '600:1',
              value: '600',
              id: 'msg22'
            }]
          }, {
            icon: require('../assets/images/mapIconTest/camer.png'),
            name: '摄像头',
            id: 'cameraId5',
            msg: [{
              label: '800:1',
              value: '800',
              id: 'msg11'
            }, {
              label: '600:1',
              value: '600',
              id: 'msg22'
            }]
          }, {
            icon: require('../assets/images/mapIconTest/camer.png'),
            name: '摄像头',
            id: 'cameraId6',
            msg: [{
              label: '800:1',
              value: '800',
              id: 'msg11'
            }, {
              label: '600:1',
              value: '600',
              id: 'msg22'
            }]
          }, {
            icon: require('../assets/images/mapIconTest/camer.png'),
            name: '摄像头',
            id: 'cameraId7',
            msg: [{
              label: '800:1',
              value: '800',
              id: 'msg11'
            }, {
              label: '600:1',
              value: '600',
              id: 'msg22'
            }]
          }],
          maximum: 6
        }
      }
    }
  },
  methods: {
    showStyle (showList) {
      this.$emit('showList', showList)
    },
    markerSetDataInit () {
      this.markerSetData.markers.forEach(v => {
        v.showList = v.msg[0].id
      })
    },
    iconGo (e) {
      var goType = e.target.getAttribute('go-type')
      this.markerSetUl = this.markerSetUl || this.$refs.markerSetUl
      this.markerSetUl.style.marginLeft = this.markerSetUl.style.marginLeft || '0px'
      if (goType === 'left' && parseInt(this.markerSetUl.style.marginLeft) === 0) {
        return
      }
      if (goType === 'right' && parseInt(this.markerSetUl.style.marginLeft) === -(this.markerSetData.markers.length - this.markerSetData.maximum) * 60) {
        return
      }
      console.log((this.markerSetData.markers.length - this.markerSetData.maximum - 1) * 60, parseInt(this.markerSetUl.style.marginLeft))
      this.iconGoByOneStep(this.markerSetUl, goType)
    },
    iconGoByOneStep (ele, type) {
      type = type || 'left'
      if (this.goPix < 29) {
        return
      }
      this.goTime && clearInterval(this.goTime)
      this.goTime = setInterval(() => {
        if (this.goPix > 0) {
          this.goPix--
        } else {
          this.goPix = 29
          clearInterval(this.goTime)
        }
        if (type === 'left') {
          ele.style.marginLeft = parseInt(parseInt(ele.style.marginLeft) + 2) + 'px'
        } else {
          ele.style.marginLeft = parseInt(parseInt(ele.style.marginLeft) - 2) + 'px'
        }
      }, 20)
    }
  },
  mounted () {
    this.markerSetDataInit()
  },
  watch: {
    selectMarkers (cur) {
      if (cur.length < 2) {
        return this.$emit('selectIcon', cur)
      }
      if (cur.length > 1) {
        this.selectMarkers = [cur[cur.length - 1]]
      }
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less">
.markerSetPanelBox {
  .pointerIcon {
    position: relative;
    float: left;
    margin-top: 10px;
    border-bottom: 2px solid #00eaff;
    padding:0 5px;
    background: url('../assets/images/mapIconTest/2dLeft.png') no-repeat left bottom;
    border-bottom-left-radius: 16px;
    >label {
      position: relative;
      display: block;
      background: url('../assets/images/mapIconTest/2dBox.png') no-repeat center;
      background-size: 60px 60px;
      height: 60px;
      width: 60px;
      cursor: pointer;
      >img {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -16px;
        margin-top: -15px;
      }
    }
    >input {
      display: none;
      &:checked + label {
        background: url('../assets/images/mapIconTest/2dBoxChecked.png') no-repeat center;
        background-size: 60px 60px;
        height: 60px;
        width: 60px;
        bottom: 8px;
      }
    }
  }
  .markersBox {
    position: relative;
    border-bottom: 2px solid #00eaff;
    padding: 0 20px;
    float: left;
    .leftIconGo {
      position: absolute;
      display: block;
      left: 0;
      background: url('../assets/images/mapIconTest/leftIcon.png') center no-repeat;
      background-size: 9px 19px;
      height: 20px;
      width: 20px;
      top: 30px;
      cursor: pointer;
    }
    .rightIconGo {
      position: absolute;
      display: block;
      right: 0;
      background: url('../assets/images/mapIconTest/rightIcon.png') center no-repeat;
      background-size: 9px 19px;
      height: 20px;
      width: 20px;
      top: 30px;
      cursor: pointer;
    }
    .wrapMarkers {
      overflow-x: hidden;
      .markerSetUl {
        float: left;
        list-style: none;
        margin-left: 0px;
        .markerSetLi {
          float: left;
          height: 60px;
          padding-top: 10px;
          >label {
            position: relative;
            display: block;
            background: url('../assets/images/mapIconTest/2dBox.png') no-repeat center;
            background-size: 60px 60px;
            height: 60px;
            width: 60px;
            cursor: pointer;
            >img {
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -16px;
              margin-top: -15px;
            }
          }
          >input {
            display: none;
            &:checked + label {
              background: url('../assets/images/mapIconTest/2dBoxChecked.png') no-repeat center;
              background-size: 60px 60px;
              height: 60px;
              width: 60px;
              bottom: 8px;
            }
          }
          .markerMsgUl {
            position: absolute;
            padding-bottom: 30px;
            bottom: 100%;
            transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            list-style: none;
            margin-left: 30px;
            display: none;
            /* IE 9 */
            -moz-transform: translateX(-50%);
            /* Firefox */
            -webkit-transform: translateX(-50%);
            /* Safari 和 Chrome */
            -o-transform: translateX(-50%);
            /* Opera */
            &:after {
              position: absolute;
              bottom: 10px;
              left: 50%;
              margin-left: -10px;
              display: block;
              content: " ";
              height: 0px;
              width: 0px;
              border: 10px solid;
              border-color: #01e0f5 transparent transparent transparent;
              z-index: 9;
            }
            &:before {
              position: absolute;
              bottom: 11px;
              left: 50%;
              margin-left: -10px;
              display: block;
              content: " ";
              height: 0px;
              width: 0px;
              border: 10px solid;
              border-color: #002b47 transparent transparent transparent;
              z-index: 10;
            }
            >li {
              position: relative;
              color: #fff;
              background-color: #002b47;
              border-left: 1px solid #01e0f5;
              border-right: 1px solid #01e0f5;
              .wrapBox {
                display: block;
                padding: 0 10px 0 36px;
                cursor: pointer;
                >input {
                  display: none;
                  &:checked + .checkLabelStyle {
                    background: url('../assets/images/mapIconTest/checkeBoxChecked.png') center no-repeat;
                  }
                }
              }
              .checkLabelStyle {
                position: absolute;
                left: 10px;
                top: 50%;
                margin-top: -9px;
                display: block;
                background: url('../assets/images/mapIconTest/checkeBox.png') center no-repeat;
                height: 17px;
                width: 17px;
                background-size: 17px 17px;
                cursor: pointer;
              }
              .wrapLabel {
                display: block;
                padding: 8px 0;
              }
              &:hover {
                background-color: rgba(1, 224, 245, 0.1)
              }
              &:last-child {
                border-bottom: 1px solid #01e0f5;
              }
              &:first-child {
                border-top: 1px solid #01e0f5;
              }
            }
          }
          &:hover .markerMsgUl {
            display: block;
          }
        }
      }
    }
  }
}
</style>
